<!--
 * @Descripttion: 
 * @version: 
 * @Author: kk
 * @Date: 2020-10-26 15:46:03
 * @LastEditors: kk
 * @LastEditTime: 2020-10-27 10:51:57
-->
<!--  -->
<template>
  <div>
    <Header></Header>
    <h2 v-if="is_show" class="Center">暂无订单信息</h2>
    <!-- for循环 -->
    <el-card class="box-card Center"  v-for="order in orders"
          :key="order.uuid" >       
      <div
        slot="header"
        class="clearfix"
      >
        <span>秒杀订单</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="pay(order.uuid,order.userId)"
        >支付</el-button>
        
        <el-button
          style="float: left;; padding: 3px 0"
          type="text"
          @click="cancelOrder(order.uuid,order.userId)"
        >取消</el-button>
      </div>
      <div>
        {{'用户id: ' +  order.userId}}
      </div>
      <div>
        {{'秒杀id: ' +  order.killId}}
      </div>
      <div>
        {{'商品id: ' +  order.itemId}}
      </div>
      <div>
        {{'uuid: ' +  order.uuid}}
      </div>
      <div>
        {{'支付状态: ' +  '未支付'}}
      </div>
    </el-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import pay from "@/api/miaosha";
import Header from "@/components/Header";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Header,
  },
  data() {
    //这里存放数据
    return {
      userId: "",
      orders: [],
      is_show: true,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    cancelOrder(uuid,userId){
        pay.deleteOrder(uuid,userId).then(response=>{
            if (response.code == 200) {
                this.$message({
                message: response.message,
                type: "success",
          });
          this.$router.push({ path: "/" });
        } else {
          this.$message.error(response.message);
        }
        }).catch(error=>{

        })
    },
    pay(uuid,userId) {
      pay.payOrder(uuid, userId).then((response) => {
        console.log(response);
        if (response.code == 200) {
          this.$message({
            message: response.message,
            type: "success",
          });
          //删除uuid
          //this.$store.commit("REMOVE_UUID")
          //成功后跳转到主页
          this.$router.push({ path: "/order" });
        } else {
          this.$message.error(response.message);
        }
      });
    },
    getOrderStatus(uuid,userId) {
      pay.getOrderStatus(uuid,userId).then((response) => {
        console.log(response.data);
        this.order = response.data;
      });
    },
    getAllOrder(userId){
        pay.getAllOrder(userId).then(response=>{
            console.log(response.data.orders)
            this.orders=response.data.orders
            if(response.code==200){
                 this.is_show=false
            }else{
                this.is_show=true
            }
        }).catch(error=>{

        })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.userId = this.$store.getters.getUser.id;
    if(this.userId){
        this.getAllOrder(this.userId);
        
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
.Center {
  margin: 20px auto;
  text-align: center;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>